<template>
    <el-row style="margin-top:10px;">
        <el-col :span="3"><div class="grid-content"></div></el-col>
        <el-col :span="18">
            <div class="grid-content" style="min-height:500px;">
                <template>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="账单名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="日期" required>
                            <el-form-item prop="date">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="事务甲方" prop="master_id" required>
                            <el-select v-model="ruleForm.master_id" placeholder="请选择事务甲方">
                                <el-option
                                    v-for="item in master_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="金额" prop="money" required>
                            <el-input v-model="ruleForm.money"></el-input>
                        </el-form-item>
                        <el-form-item label="科目" prop="subject_id" required>
                            <el-select v-model="ruleForm.subject_id" placeholder="请选择科目">
                            <el-option
                                v-for="item in subject_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="类型" prop="type" required>
                            <el-select v-model="ruleForm.type" placeholder="请选择类型">
                            <el-option label="支出" value="OU"></el-option>
                            <el-option label="收入" value="IN"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标签" prop="tag_id">
                            <el-input v-model="ruleForm.tag_id"></el-input>
                        </el-form-item>
                        <el-form-item label="事务乙方" prop="slave">
                            <el-input placeholder="请输入内容" v-model="ruleForm.slave">
                                <el-button slot="append" icon="search"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="所在城市" prop="city">
                            <el-input v-model="ruleForm.city"></el-input>
                        </el-form-item>

                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="descrip" required>
                            <el-input type="textarea" v-model="ruleForm.descrip"></el-input>
                        </el-form-item>
                        <el-form-item label="财务计划" prop="src_plan_no">
                            <el-input v-model="ruleForm.src_plan_no"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
    </el-row>
</template>

<script>
  import Main from './main.js'
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          money: '',
          master_id: '',
          subject_id: '',
          type: 'OU',
          date: this.$c.cndate(),
          descrip: ''          
        },
        rules: {
          name: [
            { required: true, message: '请输入【账单】名称', trigger: 'blur' }
          ],
          date: [
            { required: true, message: '请选择【日期】名称', trigger: 'blur' }
          ],
          master_id: [
            { required: true, message: '请选择【事务甲方】名称', trigger: 'blur' }
          ],
          money: [
            { required: true, message: '请账单【金额】名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择【账单类型】名称', trigger: 'blur' }
          ],
          descrip: [
            { required: true, message: '请输入账单【描述】名称', trigger: 'blur' }
          ]
        },
        master_options:[],
        subject_options:[]
      };
    },
    methods: {
      submitForm(formName) {
        var pager = this.$route.name;
        if('view' == pager){
            return this.$message({
                showClose: true,
                message: '您在在查看数据，查看数据时不能更新数据！',
                type: 'warning'
            });
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            //console.log(this.$refs[formName].model)
            var formData = this.$refs[formName].model;
            if('edit' == pager){
                formData['no'] = this.$route.params.no;
            }
            this.$c.PigeonsPost('finance/account/{user}/save',
                formData,
                (result)=>{
                    this.$message({
                        showClose: true,
                        message: result.msg,
                        type: 'success'
                    });
                    if(200 == result){
                        //this.$refs[formName].resetFields();
                    }
                },
                (error, httpMK)=>{
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    });
                },
                ()=>{}
            );
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created () {
        //console.log(this.$route)
        Main.editCtrlOpt(this);
        var name = this.$route.name;
        if('edit' == name || 'view' == name){
            Main.loadSinglerList(this, this.$route.params);
        }
    }
  }
</script>